<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/orderset.css">

    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="//unpkg.com/vue/dist/vue.js"></script>
    <script src="//unpkg.com/element-ui@2.11.0/lib/index.js"></script>
</head>
<body>
<div id="app">
    asd
    <el-input placeholder="请输入密码" v-model="formData.input" show-password></el-input>

    <div class="block">
        <span class="demonstration">默认</span>
        <el-date-picker
                v-model="value1"
                type="date"
                placeholder="选择日期">
        </el-date-picker>
    </div>

    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <th>3</th>
        <th>3</th>
        <th>3</th>
    </tr>
    <tr>
        <tr></tr>
    </tr>

    <el-tree
            :data="data"
            show-checkbox
            node-key="id"
            ref="tree"
            :default-expanded-keys="[2, 3]"
            :default-checked-keys="[5]"
            :props="defaultProps">
    </el-tree>

    <el-button @click="getCheckedKeys">通过 key 获取</el-button>
    <el-button @click="setCheckedKeys">通过 key 设置</el-button>


</div>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            data: [{
                id: 1,
                label: '一级 1',
                children: [{
                    id: 4,
                    label: '二级 1-1',
                    children: [{
                        id: 9,
                        label: '三级 1-1-1'
                    }, {
                        id: 10,
                        label: '三级 1-1-2'
                    }]
                }]
            }, {
                id: 2,
                label: '一级 2',
                children: [{
                    id: 5,
                    label: '二级 2-1'
                }, {
                    id: 6,
                    label: '二级 2-2'
                }]
            }, {
                id: 3,
                label: '一级 3',
                children: [{
                    id: 7,
                    label: '二级 3-1'
                }, {
                    id: 8,
                    label: '二级 3-2'
                }]
            }],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            formData: {
                input: ''
            },

            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
            }
            , value1: ''
        },
        methods:{
            getCheckedKeys() {
                console.log(this.$refs.tree.getCheckedKeys());
            },
            setCheckedKeys() {
                this.$refs.tree.setCheckedKeys([3]);
            },
        }

    })
</script>
</body>
</html>